import React, { Component } from 'react'
import { Avatar, Button, Card, Col, Input, message, Modal, Popconfirm, Row, Skeleton, Space } from 'antd'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import Meta from 'antd/es/card/Meta'
import { requestBrandlist, requestAddBrandList, requestRemoveBrandList, requestEditBrandList } from '../../api/brand'
import QueueAnim from 'rc-queue-anim'
import { connect } from 'react-redux'

export class Brand extends Component {
    state = {
        loading: true,
        isModalVisible: false,
        brand: undefined,
        _brand: undefined,
        mode: 'edit',
        cardList: ['1', '2', '3', '4', '5', '6', '7', '8'],
        show: true
    }

    btn = '添加品牌'
    title = '添加/修改品牌'
    placeholder = '请输入品牌名'

    componentDidMount () {
        this.init()
    }

    init () {
        requestBrandlist().then(res => {
            this.setState({
                cardList: res.data
            })
            setTimeout(() => {
                this.setState({
                    loading: false
                })
            }, 400)
        })
    }

    insert (brand) {
        if(!brand||!brand.length){
            message.warn("请输入品牌")
            return;
        }
        requestAddBrandList(brand).then(res => {
            if (res.code === 200) {
                message.success(res.msg)
            } else {
                message.warn(res.msg)
            }
            this.setState({
                isModalVisible: false,
            })
            this.init()
        })
    }

    edit (brand) {
        const { _brand } = this.state
        console.log('edit', _brand, brand)
        if(!brand.length||!brand){
            message.warn("请输入品牌")
            return;
        }
        requestEditBrandList(_brand,brand).then(res=>{
            this.setState({
                isModalVisible: false,
            })
            message.success("修改品牌成功")
            this.init()
        })
    }

    deleted (brand) {
        requestRemoveBrandList(brand).then(res => {
            message.success(res.msg)
            this.setState({
                isModalVisible: false,
            })
            this.init()
        })
    }

    render () {
        const handleOk = () => {
            let { mode, brand } = this.state
            switch (mode) {
                case 'insert':
                    this.insert(brand)
                    break
                case 'edit':
                    this.edit(brand)
                    break
                default:
                    console.log('默认行为')
            }
        }

        const handleCancel = () => {
            this.setState({
                isModalVisible: false,
                brand: undefined
            })
        }

        const addBrand = () => {
            this.setState({
                mode: 'insert',
                isModalVisible: true
            })
        }

        const brandInput = (e) => {
            this.setState({
                brand: e.target.value
            })
        }

        const edit = (item) => {
            this.setState({
                mode: 'edit',
                isModalVisible: true,
                brand: item,
                _brand: item
            })
        }

        const remove = (item) => {
            console.log('delete：', item)
            this.deleted(item)
        }

        const renderCard = (cardlist) => {
            return cardlist.map(item => (<Col span={6} key={item}>
                <Card
                    actions={[
                        <EditOutlined key="edit" onClick={edit.bind(null, item)}/>,
                        <Popconfirm onConfirm={remove.bind(null, item)} title="确认删除？">
                            <DeleteOutlined key="delete"/>
                        </Popconfirm>,
                    ]}
                >
                    <Skeleton loading={this.state.loading} avatar active>
                        <Meta
                            avatar={<Avatar>{item.slice(0, 2)}</Avatar>}
                            title={item}
                            description={'品牌：' + item}
                        />
                    </Skeleton>
                </Card>
            </Col>))
        }

        return (<QueueAnim className="demo-content" key="demo">
            {this.props.show ? <div className="demo-tbody" key="a">
                <div style={{ height: window.innerHeight - 200, overflowY: 'auto', overflowX: 'hidden' }}>
                    <Space style={{ marginBottom: 18 }}>
                        <Button type="primary" onClick={addBrand}>{this.btn}</Button>
                    </Space>
                    <Row gutter={[8, 16]}>
                        {renderCard(this.state.cardList)}
                    </Row>
                    <Modal title={this.title} visible={this.state.isModalVisible} onOk={handleOk}
                           onCancel={handleCancel}>
                        <Input placeholder={this.placeholder} value={this.state.brand} onInput={brandInput}/>
                    </Modal>
                </div>
            </div> : null}
        </QueueAnim>)
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(Brand)
